<template>
    <div style="margin-bottom: 10px;">
        <el-button type="primary" @click="getData">获取数据</el-button>
    </div>
    <div class="async-render">
        <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
            <el-tab-pane :lazy="true" v-for="item in panelList" :key="item.label" :label="item.label" :name="item.name">
                <div v-for="(str, j) in item.list" :key="`str${str + j}`">
                    {{ item.label + "--" + str }}
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue"
let activeName = ref("Panel0")
let panelList = reactive([]);
/**
 * 获取数据
 */
const getData = async () => {
    panelList.length = 0;
    for (let index = 0; index < 5; index++) {
        let list = ref([])
        let panelItem = { label: `Panel${index}`, name: `Panel${index}`, list: list };
        panelList.push(panelItem);

        for (let innerIndex = 0; innerIndex < 10; innerIndex++) {
            getInnerData(panelItem, innerIndex).then(resp => {
                panelItem.list.value.push(resp);
            })
        }
    }

}
/**
 * 模拟获取数据接口
 */
const getInnerData = async (panelItem, innerIndex) => {
    return new Promise(resolve => {
        let time = parseInt(1000 + Math.random() * 1000)
        console.log('等待时间', time, panelItem.name, innerIndex)
        setTimeout(() => {
            console.log('数据', time, panelItem.name, innerIndex)
            resolve(`数据:${panelItem.name}-${innerIndex}`)
        }, time)
    })
}


const handleClick = (item) => {
    console.log("handleClick: " + item)
}
</script>
